<template>
    <!-- 导航栏区域 -->
    <div class="nav">
        <!-- 
            RouterLink:作用是实现页面之间的导航，类似于HTML中<a>标签，但是RouterLink更多的是具有vue-router的特性和功能。
        -->
        <ul>
            <li v-for="menu in menuList" :key="menu.menuId">
                <RouterLink :to="menu.url" class="a">{{menu.menuName}}</RouterLink>
            </li>
        </ul>
    </div>
    <hr>
    
    <!-- 展示区域 -->
    <div class="main">
        <!-- 
            RouterView：用来展示当前路由对应的组件的组件，它是整个路由系统的核心显示部分。
            会根据路由路径，把匹配的组件渲染到页面上。
        -->
        <RouterView></RouterView>
    </div>

</template>

<script setup lang="ts" name="App">
import { RouterView } from 'vue-router';
import type { MenuList } from './types/menu';
import axios from 'axios';
import { onMounted,  ref } from 'vue';

/*
    let menuList=[
        {
            menuId:1,
            menuName:'首页',
            url:'/home'
        },
        {
            menuId:3,
            menuName:'用户',
            url:'/user'
        },
        {
            menuId:3,
            menuName:'角色',
            url:'/role'
        },
        {
            menuId:4,
            menuName:'商品',
            url:'/goods'
        },
    ]
*/
    let menuList=ref<MenuList>([])

    async function getMenu() {
        let {data}=await axios.get('/menu/queryAll')
        menuList.value=data
    }
    
    onMounted(()=>{
        getMenu()
    })

</script>
<!-- 

    npm Nodejs Package Manager  nodejs包管理器
    
    npm的命令
        npm i   npm install 效果一样，都是下载安装当前项目需要各种包和库。会自动下载到node_modules文件夹中

        如果要安装指定的包，那么命令：
        npm i 要安装的包名  | npm install 要安装的包名

-->

    


<style scoped>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

li {
    display: inline;
    margin-right: 5px;
}
.a{
    font-size: 20px;
}
.a:link,
.a:visited {
    font-weight: bold;
    color: #008c8c;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    text-transform: uppercase;
}

.a:hover,
.a:active {
    background-color: #008c8c;
    color: #fff;
}
.left-nav{
    height: 30px;
}
.left-nav a{
    margin: 10px;
}

</style>
